<script src="./script.js"></script>
<style src="./style.css"></style>
<template>
  <div class="app-container">
    <div class="filter-container">
      <div>
        <el-input v-model="listQuery.keyword" class="filter-item" placeholder="商品名称 | 规格名称" clearable style="width:200px;" @input="handleSearch" />

        <el-date-picker
          v-model="datetime"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          type="daterange"
          :picker-options="pickerOptions"
          :default-time="['00:00:00']"
          value-format="yyyy-MM-dd"
          class="filter-item"
        />

        <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>

        <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="exportData">导出数据</el-button>

      </div>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      :show-summary="statistics != null"
      :summary-method="getSummaries"
      style="width: 100%;"
    >

      <el-table-column label="ID" prop="id" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="分类" width="160">
        <template slot-scope="{row}">
          <div><el-link type="primary">{{ row.parent_category_name }}></el-link><el-link type="danger">{{ row.category_name }}</el-link></div>
        </template>
      </el-table-column>

      <el-table-column label="名称">
        <template slot-scope="{row}">
          {{ row.product_name }}
        </template>
      </el-table-column>

      <el-table-column label="规格" width="160">
        <template slot-scope="{row}">
          {{ row.product_item_name }}
        </template>
      </el-table-column>

      <el-table-column label="平均出库价" width="120px">
        <template slot-scope="{row}">
          {{ row.stock_avg_price }}
        </template>
      </el-table-column>

      <el-table-column label="平均售价" width="120px">
        <template slot-scope="{row}">
          {{ row.avg_price }}
        </template>
      </el-table-column>

      <el-table-column label="数量" width="120px">
        <template slot-scope="{row}">
          {{ row.quantity }}
        </template>
      </el-table-column>

      <el-table-column label="出库成本" width="120px">
        <template slot-scope="{row}">
          {{ row.stock_subtotal }}
        </template>
      </el-table-column>

      <el-table-column label="销售额" width="120px">
        <template slot-scope="{row}">
          {{ row.subtotal }}
        </template>
      </el-table-column>

      <el-table-column label="毛利" width="120px">
        <template slot-scope="{row}">
          {{ row.profits }}
        </template>
      </el-table-column>

      <el-table-column label="毛利率" width="120px">
        <template slot-scope="{row}">
          {{ row.profits_rate }}
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

  </div>
</template>
